<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
<!DOCTYPE html>
<html>
<head>
    <title>Grapheditor viewer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        #graph {
            position: absolute;
            cursor: move;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0
        }
    </style>
    <script type="text/javascript">
        var STENCIL_PATH = 'stencils';
        var IMAGE_PATH = 'images';
        var STYLE_PATH = 'styles';

        var urlParams = (function (url) {
            var result = {};
            var idx = url.lastIndexOf('?');
            if (idx > 0) {
                var params = url.substring(idx + 1).split('&');
                for (var i = 0; i < params.length; i++) {
                    idx = params[i].indexOf('=');
                    if (idx > 0) {
                        result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                    }
                }
            }
            return result;
        })(window.location.href);

        var mxLoadResources = false;
        var mxBasePath = './src';
    </script>
    <script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
    <script type="text/javascript" src="js/mxClient.js"></script>
    <script type="text/javascript" src="js/Graph.js"></script>
    <script type="text/javascript" src="js/Shapes.js"></script>
</head>
<body class="geEditor">
<div id="graph"></div>
<script type="text/javascript">
    (function (win) {
        var graph = new Graph(document.getElementById('graph'));

        graph.setTooltips(false);
        graph.setEnabled(false);
        graph.setPanning(true);

        var style = graph.getStylesheet().getDefaultVertexStyle();
        style[mxConstants.STYLE_FONTCOLOR] = "#000000";
        style[mxConstants.STYLE_STROKECOLOR] = "#777777";
        style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
        (style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
        style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";

        graph.panningHandler.useLeftButtonForPanning = true;
        graph.panningHandler.ignoreCell = true;
        graph.container.style.cursor = "move";
        graph.resizeContainer = false;
        graph.centerZoom = true;
        graph.border = 0;


        win.addEventListener("message", function (event) {
            var data = event.data;
            switch (data.act) {
                case 'setXml':
                    try {
                        var xmlDoc = mxUtils.parseXml(data.params.xml);
                        var codec = new mxCodec(xmlDoc);
                        codec.decode(xmlDoc.documentElement, graph.getModel());
                        typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
                        // typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
                        // typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
                    } catch (e) {

                    }
                    break;

                case 'zoom':
                    try {
                        graph.zoomTo(data.params.zoom);
                    } catch (e) {

                    }
                    break;
            }
        });

        win.parent.postMessage({
            act: 'ready',
            params: {}
        }, '*');
    })(window);
</script>
</body>
</html>
